/*
Kiwi Editor is a framework for building WYSIWYG web editors.
Copyright (C) 2011  Roosevelt de Lima Sardinha

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

Contact the author at roosevelt1@gmail.com (Roosevelt) 
*/

// Textbox
function inputTextbox(properties){
	var content = [];
    var textbox = null;
	var EO = properties.EO;
	
	var textNode = document.createTextNode(properties.label + ":");
    var textbox = document.createElement('input');
    textbox.type = 'text';
    textbox.maxLength = 100;
    textbox.value = EO.getProperty(properties.property);
    textbox.onchange = function(){
	    EO.setProperty(properties.property, this.value);
    }

	textbox.onfocus = function(event){
		if (EO.instructionBox) {
			EO.instructionBox.setInstruction(properties.help, false);
		}
	   	EO.hasFocus = true;
	    EO.EOM.disableKeyboard();
	}
	textbox.onblur = function(event){
	    thisObject.hasFocus = false;
	    EO.EOM.enableKeyboard();
	}
	
	return [{
		colspan: 1,
		rowspan: 1,
		row:0,
		cell:0,
		content: textNode 
	}, {
		colspan: 1,
		rowspan: 1,
		row:0,
		cell:1,
		content: textbox 		
	}];
}


// Color Selector
function inputColor(properties){
	var EO = properties.EO;
	var textNode = document.createTextNode(properties.label + ":");
    var textboxBgColor = document.createElement('input');
    textboxBgColor.type = 'text';
    textboxBgColor.maxLength = 7;
    textboxBgColor.onchange = function(){
        EO.setProperty(properties.property, this.value);
    }
    var bgColor = new jscolor.color(textboxBgColor);
    bgColor.required = true;
    bgColor.hash = true;
    textboxBgColor.onfocus = function(event){
		if (EO.instructionBox) {
			EO.instructionBox.setInstruction(properties.help, false);
		}	
	   	EO.hasFocus = true;
	    EO.EOM.disableKeyboard();
	};
	
    textboxBgColor.onblur = function(event){
	    thisObject.hasFocus = false;
	    EO.EOM.enableKeyboard();
	};
	
	var toolUnselect = EO.onUnselect;
	EO.onUnselect = function(){
		if (toolUnselect) {
			toolUnselect();
		}
		bgColor.hidePicker();
		delete bgColor;
	}
	
	var toolBeforeDelete = EO.onBeforeDelete;
	EO.onBeforeDelete = function(){
		if (toolBeforeDelete) {
			toolBeforeDelete();
		}
		bgColor.hidePicker();
		delete bgColor;
	}
		
	return[{
		colspan: 1,
		rowspan: 1,
		row:0,
		cell:0,
		content: textNode 
	}, {
		colspan: 1,
		rowspan: 1,
		row:0,
		cell:1,
		content: textboxBgColor 		
	}];		
}

// Font Type Selector
function inputFont(properties){
	var EO = properties.EO;
	var textNode = document.createTextNode(properties.label + ":");
    var selectFont = document.createElement('select');
    selectFont.style.width = '115px';
    var myFontSelector = new font(selectFont);
    selectFont.onchange = function(){
		EO.setProperty(properties.property, this.value);
    }
	
	return[{
		colspan: 1,
		rowspan: 1,
		row:0,
		cell:0,
		content: textNode 
	}, {
		colspan: 1,
		rowspan: 1,
		row:0,
		cell:1,
		content: selectFont 		
	}];	
}


function inputFormatText(properties){
    // Add tinyMCE editor
	var EO = properties.EO;
	var textNode = document.createTextNode(properties.label + ":");
    var textarea = document.createElement('textarea');
    textarea.id = EO.id + "-textarea-editor";
    textarea.style.width = '640px';
      	   
    var editorTinyMCE = new tinyMCE.Editor(EO.id + "-textarea-editor", {
        theme: 'advanced',
        plugins: "fullscreen",
        theme_advanced_buttons1: 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,fullscreen',
        theme_advanced_buttons2: '',
        theme_advanced_buttons3: '',
        mode: 'textareas',
        fullscreen_new_window: true,
        fullscreen_settings: {
            theme_advanced_path_location: "top",
            theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,code,|,forecolor,backcolor,|,sub,sup,fullscreen"
        }
    });
 
	editorTinyMCE.onKeyUp.add(function(editor, event){
        EO.div.innerHTML = editorTinyMCE.getContent();
        EO.EOM.correctPosition(EO.id);
    });
    
    editorTinyMCE.onChange.add(function(editor, event){
        EO.div.innerHTML = editorTinyMCE.getContent();
        EO.EOM.correctPosition(EO.id);
    });
    
    editorTinyMCE.onLoadContent.add(function(editor){
        editor.setContent(EO.div.innerHTML);
    });
	
	EO.onShowProperties = function(){
		editorTinyMCE.render();
	};

	EO.editor = editorTinyMCE;
	
	return[{
		colspan: 1,
		rowspan: 1,
		row:0,
		cell:0,
		content: textNode 
	},{
		colspan: 5,
		rowspan: 1,
		row:0,
		cell:1,
		content: textarea 
	}];	
}

function inputFileUpload(properties){
	var EO = properties.EO;
	var textNode = document.createTextNode(properties.label + ":");
	var filesPath = "data/";
	var file = document.createElement('input');
	file.type = 'file';
	file.id = 'fileToUpload';
	file.name = 'fileToUpload';

	var img = document.createElement('img');
	img.src = APP_HOME + 'js/tools/image/loading.gif';
	img.style.display = 'none';
	img.style.width = '20px';
	img.style.height = '20px';
	
	var button =  document.createElement('button');
	button.innerHTML = 'Send Image';
	button.style.width = '315px';
	button.onclick = function(){
		//starting setting some animation when the ajax starts and completes
		$("#loading")
		.ajaxStart(function(){
			$(this).show();
		})
		.ajaxComplete(function(){
			$(this).hide();
		});
		
		$.ajaxFileUpload
		(
			{
				url: location.protocol + "//" + location.hostname + ":" + location.port + '/tools/images', 
				secureuri:false,
				fileElementId:'fileToUpload',
				dataType: 'json',
				success: function (data, status){
					EO.setProperty(properties.property, filesPath + file.value.match(/[^\/\\]+$/));
				},
				error: function (data, status, e){
					EO.setProperty(properties.property, filesPath + file.value.match(/[^\/\\]+$/));
				}
			}
		)
	}
		 	
	return[{
		colspan: 1,
		rowspan: 1,
		row:0,
		cell:0,
		content: textNode 
	},{
		colspan: 1,
		rowspan: 1,
		row:0,
		cell:1,
		content: file 
	},{
		colspan: 1,
		rowspan: 1,
		row:1,
		cell:0,
		content: img
	},{
		colspan: 1,
		rowspan: 1,
		row:1,
		cell:1,
		content: button 
	}];	
}
